<template>
  <!-- 1先创建基本的样式 -->

  <!-- 
               1)vue项目中引入iconfont
               2)实现双向数据绑定，在js层获取到用户的数据  
                    （1） input 标签的属性  value  input事件
                     （2）绑定一个动态的属性  value
                      (3)添加input 事件，在通过 事件对象 获取到 input 标签的输入的内容
               3)进行校验
                  (1) 条件判断
               4)我在登录页面中需要获取到 ，用户输入的密码
                  （1）子组件向父组件给数据 
          -->
  <div class="w-input">
    <div>
      <i class="iconfont icon-7"></i>
      <input :value="value" @input="getValue" @blur="blur" type="text" />
      <i class=" iconfont icon-shanchu " id="icofont2" v-if="showP"></i>
    </div>
    <!-- 校验 =》当这个input 没有内容 ，托镖 =》进行校验 -->
    <div class="pass" v-if="showP">请输入密码</div>
  </div>
</template>

<script setup  lang="ts">
import { ref } from "vue";
//泛型 =》这个方法使用决定数据类型
let value = ref<number | string>("");
let showP = ref<boolean>(false);
const getValue = (e: any) => {
//   console.log(e.target.value);
  //复制
  value.value = e.target.value;
};

// 子组件给父组件数据
  let emits = defineEmits(['getPassw'])
const blur = () => {
    // console.log(55558,);
    
  if (!value.value) {
    //需要校验
    showP.value = true;
  } else {
    showP.value = false;
  }
  emits('getPassw',value.value)
};
</script>

<style scoped lang="scss">
.w-input {
  width: 100%;
  border: 1px solid #c0c4cc;
  padding-left: 10px;
  border-radius: 5px;
  position: relative;
  input {
    border: none;
    outline: none;
    width:87%;
  }
  i {
    color: #ccc;
  }
  #icofont2{
    color:red;
  }

  .pass {
    position: absolute;
    width: 100%;
    color: red;
    top: 30px;
    left: 0;
  }
}
.w-input:hover {
  border-color: aquamarine;
}
</style>